<template>
  <d2-container>
    <div class="pb-2 d-f w-100">
      <div class=" py-2 px-2 mx-2 novel-info border" v-if="introductionStata">
        <div class="flex-1">
          <div class="font-s-2"><span class="mr-1 text-light-grey">书名:</span>{{ novelDetail.name }}</div>
        </div>
        <div class="flex-1 mt-2">
          <div class="font-s-2"><span class="mr-1 text-light-grey">作者:</span>{{ novelDetail.user_username }}</div>
        </div>
        <div class="flex-1 mt-2">
          <div class="font-s-2 text-light-grey"><span class="mr-1 ">上架时间:</span>{{ novelDetail.create_time }}</div>
        </div>
        <div class="flex-1 d-f mt-2">
          <div class="font-s-2 text-light-grey mr-1">封面:</div>
          <div class="novel-cover">
            <img :src="novelDetail.cover_image" class="novel-cover" alt="">
          </div>
        </div>
        <div class="flex-1 mt-2">
          <div class="font-s-2 text-light-grey">简介:</div>
          <div class="font-s-2 text-light-grey flex-1 mt-2 novel-introduction">
            {{ novelDetail.introduction }}
          </div>
        </div>
      </div>
      <div class="ml-2 flex-1">
        <div class="pb-2">
          <div><el-button type="warning" @click="addChapter" icon="el-icon-plus">添加章节</el-button></div>
        </div>
        <div>
          <el-table :data="chapterList" stripe>
            <el-table-column align="center" label="序号" type="index" width="40" />
            <el-table-column prop="title" label="小说章节" width="150" />
            <el-table-column align="center" prop="novel_name" label="付费/免费" width="60">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.is_free == true" type="danger">收费章节</el-tag>
                <el-tag v-if="scope.row.is_free == false" type="success">免费章节</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="update_time" label="更新时间" width="90" />
            <el-table-column align="center" label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row.id)">修改</el-button>
                <el-button size="mini" type="danger" @click="openDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="mt-3">
          <el-pagination background layout="total, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="queryInfo.page" :total="chapterTotal">
          </el-pagination>
        </div>
      </div>

    </div>
  </d2-container>
</template>

<script>
  import {
    novelDetailUrl,
    chapterListUrl,
    chapterDetailUrl,
    chapterDeleteUrl
  } from "@/utils/novel"
  export default {
    data() {
      return {
        queryInfo: {
          novel_id: '',
          sort_by:'',
          page: 1,
          pageSize: 10
        },
        chapterList: [],
        novelDetail: '',
        novelId: '',
        introductionStata: false,
        chapterTotal: 1
      }
    },
    mounted() {
      if (this.$route.query.noveId) {
        this.queryInfo.novel_id = this.$route.query.noveId;
        this.introductionStata = true
        this.getNovelDetail()
      } else {
        this.queryInfo.novel_id = ''
        this.queryInfo.sort_by = 'desc'
        this.introductionStata = false
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        this.getChapterList()
      },
      getChapterList() {
        this.$get(chapterListUrl, this.queryInfo).then(res => {
          this.chapterList = res.data.data.list
          this.chapterTotal = res.data.data.total
        })
      },
      getNovelDetail() {
        this.$get(novelDetailUrl + this.queryInfo.novel_id + '/').then(res => {
          this.novelDetail = res.data.data
          this.novelId = res.data.data.id
        })
      },
      // 分页页码显示条数
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfo.pageSize = newSize
        this.getChapterList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfo.page = newPage
        this.getChapterList()
      },
      handleEdit(chapterId) {
        this.$router.push({
          path: '/addChapter',
          query: {
            noveId: this.novelId,
            chapterId: chapterId // 添加第二个参数
          }
        });
      },
      openDelete(chapterId) {
        this.$confirm('此操作将删除该章节, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$del(chapterDeleteUrl + chapterId + '/').then(res=>{
            this.getChapterList()
            this.$message({
              type: 'success',
              message: '删除成功'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      addChapter() {
        this.$router.push({
          path: '/addChapter',
          query: {
            noveId: this.novelId
          }
        });
      }
    }
  }
</script>

<style>
  .novel-info {
    width: 350px;
  }

  .novel-cover {
    width: 100px;
    height: 140px;
  }

  .novel-introduction {
    line-height: 2;
    text-indent: 2em;
  }
</style>
